<template>
  <section>
    <el-row>
      <el-col :span="24">
        <!--顶部操作按钮-->
        <el-space class="top-btns">
          <el-button type="success" size="small" @click="onSubmit">刷新</el-button>
        </el-space>

        <!--搜索表单-->
        <el-form :inline="true" size="small">

        </el-form>
        <!--数据表格-->
        <el-table :data="tableData" border size="small">
          <el-table-column prop="title" label="配置名称" align="center"></el-table-column>
          <el-table-column prop="value" label="配置值" align="center"></el-table-column>
          <el-table-column prop="update_at" label="更新时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)" size="small"><el-icon><EditPen/></el-icon></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="编辑" center v-model="dialogFormVisible">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="form.title" readonly></el-input>
        </el-form-item>
        <el-form-item label="配置值" prop="value">
          <el-input v-model="form.value"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="editLoading">保存</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>
<script setup>
  import { ElMessage } from 'element-plus'
  import { ref,shallowRef } from "vue";
  import func from '@/common/func'
  const criteria = ref({})
  const tableData = ref([])
  const dialogFormVisible = ref(false)
  const editLoading = ref(false)
  const formRef = ref(null)
  const form = ref({})
  const rules = ref({
    title: [
      {required: true, message: '请输入名称', trigger: 'blur'},
    ],
    value: [
      {required: true, message: '请输入配置值', trigger: 'blur'},
    ],
  })

  let criteria_default = {}
  let listUrl = '/config/configList'
  let editUrl = '/config/configEdit'

  for (let i in criteria.value) {
    if (criteria_default[i] === undefined) {
      criteria_default[i] = criteria.value[i];
    }
  }
  loadData();

  function onSubmit() {
    loadData();
  }

  function handleEdit(row) {
    form.value = {
      key: row.key,
      title: row.title,
      value: row.value,
    }
    dialogFormVisible.value = true
  }
  function handleSave() {
    formRef.value.validate((valid) => {
      if (!valid) {
        return false
      }
      editLoading.value = true;
      func.request(editUrl, form.value).then(res => {
        editLoading.value = false;
        if (res.code === 1) {
          dialogFormVisible.value = false
          ElMessage({message: res.msg,type: 'success'})
          loadData()
        }
      });
    });
  }

  function loadData() {
    var pdt = {};
    func.request(listUrl, pdt).then(res => {
      if (res.code === 1) {
        tableData.value = res.data.list;
      }
    });
  }

</script>

<style lang="scss">

</style>
